<data name="动态列表" th:currentPage="${param.currentPage}" th:begin="${param.begin}" th:end="${param.end}" th:asc="${param.asc}" />
<data name="用户信息" />
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="_csrf" th:content="${_csrf.token}" />
    <meta name="_csrf_header" th:content="${_csrf.headerName}" />
    <link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}" />
    <link th:href="@{/static/css/blog.css}" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
	  <script th:src="@{/static/js/html5shiv.min.js}"></script>
	  <script th:src="@{/static/js/respond.min.js}"></script>
	<![endif]-->
    <title>动态</title>
</head>

<body>
    <fragment name="顶部导航" />
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="alert alert-info" th:if="${#lists.isEmpty(newsPage.datas)}">没有任何动态</div>
                <div th:unless="${#lists.isEmpty(newsPage.datas)}">
                    <div style="text-align:right"><input type="checkbox" id="asc" th:attr="checked=${newsPage.param.asc ? 'checked' : null}" />正序</div>
                    <div class="media" th:each="news : ${newsPage.datas}" th:data-news="${news.id}">
                        <div class="media-left">
                            <a href="#"> <img class="media-object"
								th:src="${gravatars.getOptionalUrl(myInfo.gravatar).orElse('/static/img/guest.png')}"
								style="width: 32px; height: 32px;">
							</a>
                        </div>
                        <div class="media-body">
                            <h5 class="media-heading">
                                <span th:text="${times.format(news.write,'yyyy-MM-dd HH:mm')}"></span>
                                <a href="javascript:void(0)" th:data-comment="${news.id}" style="margin-left: 5px" th:if="${news.allowComment || user != null}"><span
									class="glyphicon glyphicon-comment" aria-hidden="true"></span></a>
                            </h5>
                            <p th:utext="${news.content}"></p>
                            <p th:attr="style=${news.comments > 0 ? 'null' : 'display:none'}" class="text text-info" th:data-comment-info="${news.id}">
                                <a href="javascript:void(0)" th:onclick="'render(\''+${news.id}+'\',\''+${news.allowComment}+'\')'"><small>共有<span
										class="num">[[${news.comments}]]</span>条评论
								</small></a>
                            </p>
                            <div th:data-comment-detail="${news.id}" style="display: none"></div>
                        </div>
                    </div>
                </div>
                <nav th:if="${newsPage.totalPage > 1}" th:with="newsUrlHelper=${urls.newsUrlHelper}">
                    <ul class="pagination">
                        <li><a th:href="${newsUrlHelper.getNewsUrl(newsPage.param,1)}"><span
								aria-hidden="true">&laquo;</span></a></li>
                        <li th:each=" i : ${#numbers.sequence(newsPage.listbegin, newsPage.listend-1)}" th:class="${(i == newsPage.currentPage) ? 'active' : ''}"><a th:href="${newsUrlHelper.getNewsUrl(newsPage.param,i)}" th:text="${i}"></a></li>
                        <li><a th:href="${newsUrlHelper.getNewsUrl(newsPage.param,newsPage.totalPage)}"><span
								aria-hidden="true">&raquo;</span></a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>


    <fragment name="底部" />
    <div th:replace="base/foot_source">&nbsp;</div>
    <script th:inline="javascript">
        var config = {
            isLogin: [[${user != null}]],
            gravatarPrefix: [[${gravatars.getUrl('')}]]
        };
    </script>
    <script th:src="@{/static/js/new_comment.js}">
    </script>
  <script>
  	$(function(){
    	$('[data-comment]').click(function(){
          var moduleId = $(this).data('comment');
        	cmt.doComment(moduleId,'news',function(){
              render(moduleId)
            });
        });
      $(document).on("click","a[data-comment-clear]",function(){
        var moduleId = $(this).attr('data-comment-clear');
        $('[data-comment-detail=\''+moduleId+'\']').html('').hide();
        $(this).remove();
      }); 
      $("#asc").change(function(){
    	  window.location.href = basePath + '/news?asc='+$(this).is(":checked");
      });
    });
    var afterLoad = function(page){
      var moduleId = page.param.module.id;
      var c = $('[data-comment-detail=\''+moduleId+'\']');
      c.show();
      var ci = $('[data-comment-info=\''+moduleId+'\']');
      var total = page.totalRow;
      if(config.isLogin){
      	total -= page.checkCount;
      }
      ci.find('.num').html(total);
      if(total == 0){
      	ci.hide();
      }else{
        c.prepend('<hr>');
      	ci.show();
        if(ci.find('[data-comment-clear]').length == 0){
        	ci.append('<a href="javascript:void(0)" data-comment-clear="'+moduleId+'" style="margin-left:5px" data-comment-clear><small>收起</small></a>')
        }
      }
    }
   
    var render = function(moduleId,allowComment){
    	  var c = $('[data-comment-detail=\''+moduleId+'\']');
          cmt.renderComment({
            pageSize:5,
            page:1,
            moduleId:moduleId,
            moduleType:'news',
            asc:true,
            container:c,
            allowComment:allowComment == 'true',
            afterLoad:afterLoad
          });
    }
  </script>
</body>

</html>